<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="推广名称" prop="launchName">
                            <el-select v-model="search.launchId" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in plans"
                                    :key="item.id"
                                    :label="item.launchName"
                                    :value="item.launchId === 0 ? -1 : item.launchId">
                                    {{ item.launchName }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="平台" prop="platform">
                            <el-select v-model="search.platform" clearable
                                       placeholder="平台">
                                <el-option label="双平台"
                                           value="0"></el-option>
                                <el-option label="点评"
                                           value="1"></el-option>
                                <el-option label="美团"
                                           value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=12>
                        <el-form-item label="请选择日期">
                            <el-date-picker
                                v-model="dateRange"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="this.CONST.analysis_date_options">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item :label="darkMode ? '深色模式' : '浅色模式'">
                            <el-switch v-model="darkMode" @change="updateMode" active-color="#0f0c28"
                                       inactive-color="#5fcb71"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" v-on:click="switchDimension">
                                {{ dimension === 'day' ? '分时分析' : '按天分析' }}
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="switchSelected">
                                {{ selectedAllFlag ? '全不选' : '全选' }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-descriptions title="" direction="vertical" :column="9" border size="small">
            <el-descriptions-item :label="item.label" v-for="item in fields" :key="item.id">
                <el-tag size="small" type="info"> 总共：{{ allSummaryData[item.prop] }}</el-tag>
                <br/>
                <el-tag size="small" type="success"> 点评：{{ dpSummaryData[item.prop] }}</el-tag>
                <br/>
                <el-tag size="small" type="warning"> 美团：{{ mtSummaryData[item.prop] }}</el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <el-row>
            <el-col :span="8">
                <div ref="platformPieChart" style="height:400px; width:100%"></div>
            </el-col>
            <el-col :span="8">
                <div ref="launchPieChart" style="height:400px; width:100%"></div>
            </el-col>
            <el-col :span="8">
                <div ref="keywordPieChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div ref="basicChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div ref="ratioChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    getDpCpcPlanByShopId,
    getDpCpcPlanFields,
    getDpCpcReportBarData,
    getDpCpcReportCostPieData,
    getDpCpcReportSummaryData
} from '@/api/api'

export default {
    name: "DpCpcAnalysis",
    data() {
        return {
            // 搜索条件
            search: {
                launchId: -1,
                platform: '0',
                timeUnit: 'day',
                fields: '',
                startDate: '',
                endDate: '',
            },
            // 按天分析，hour分时分析
            dimension: 'day',
            // 时间范围
            dateRange: [],
            // 字段信息
            fields: [
                {
                    "label": "花费",
                    "prop": "t30001",
                },
                {
                    "label": "曝光",
                    "prop": "t30002",
                },
                {
                    "label": "点击",
                    "prop": "t30003",
                },
                {
                    "label": "点击均价",
                    "prop": "t30004",
                },
                {
                    "label": "点击率",
                    "prop": "u10001",
                },
                {
                    "label": "浏览量",
                    "prop": "t30005",
                },
                {
                    "label": "浏览率",
                    "prop": "u10002",
                },
                {
                    "label": "感兴趣",
                    "prop": "t30026",
                },
                {
                    "label": "感兴趣率",
                    "prop": "u10003",
                },
                {
                    "label": "团单量",
                    "prop": "t30020",
                },
                {
                    "label": "单笔团单成本",
                    "prop": "u10004",
                },
                {
                    "label": "查看图片",
                    "prop": "t30006",
                },
                {
                    "label": "查看评论",
                    "prop": "t30007",
                },
                {
                    "label": "查看团购",
                    "prop": "t30009",
                },
                {
                    "label": "分享",
                    "prop": "t30011",
                },
                {
                    "label": "收藏",
                    "prop": "t30012",
                },
                {
                    "label": "查看地址",
                    "prop": "t30013",
                },
                {
                    "label": "查看电话",
                    "prop": "t30014",
                },
                {
                    "label": "优惠促销领取",
                    "prop": "t30021",
                },
                {
                    "label": "闪惠买单量",
                    "prop": "t30022",
                },
                {
                    "label": "查看推荐菜",
                    "prop": "t30028",
                },
                {
                    "label": "订单量",
                    "prop": "t30029",
                },
                {
                    "label": "千次曝光成本",
                    "prop": "u10cpm",
                },
            ],
            // 默认黑色主题色
            darkMode: true,
            // 主题色
            theme: 'dark',

            // 推广计划
            plans: [],

            // 汇总数据
            allSummaryData: {},
            dpSummaryData: {},
            mtSummaryData: {},

            selectedAllFlag: true,
            basicOption: {},
            basicChart: {},

            ratioOption: {},
            ratioChart: {},

            // 饼图
            platformPieOption: {},
            platformPieChart: {},
            launchPieOption: {},
            launchPieChart: {},
            keywordPieOption: {},
            keywordPieChart: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        launchId: Number,
        size: {
            type: String,
            default: 'small'
        },
        startDate: String,
        endDate: String,
    },
    watch: {
        shopName: function (val, oldVal) {
            this.shopName = val;
        },
        startDate: function (val, oldVal) {
            this.startDate = val;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        },
        endDate: function (val, oldVal) {
            this.endDate = val;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        },
    },
    methods: {
        updateMode() {
            this.theme = this.darkMode ? 'dark' : 'light';
            if (this.basicChart.id) {
                // 销毁
                this.basicChart.dispose();
            }
            this.basicChart = this.$echarts.init(this.$refs.basicChart, this.theme);
            this.basicChart.setOption(this.basicOption);

            if (this.ratioChart.id) {
                // 销毁
                this.ratioChart.dispose();
            }
            this.ratioChart = this.$echarts.init(this.$refs.ratioChart, this.theme);
            this.ratioChart.setOption(this.ratioOption);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        switchSelected() {
            this.selectedAllFlag = !this.selectedAllFlag;
            let selected = this.basicOption.legend.selected;
            for (let key in selected) {
                selected[key] = this.selectedAllFlag;
            }
            this.initChart();
        },
        switchDimension() {
            if (this.dimension === 'day') {
                this.dimension = 'hour';
            } else {
                this.dimension = 'day';
            }
            this.getData();
        },
        // 图表初始化
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            if (this.basicChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.basicChart = this.$echarts.init(this.$refs.basicChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.basicChart.setOption(this.basicOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.ratioChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.ratioChart = this.$echarts.init(this.$refs.ratioChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.ratioChart.setOption(this.ratioOption);
        },
        // 饼图初始化
        initPieChart() {
            // 基于准备好的dom，初始化echarts实例
            if (this.platformPieChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.platformPieChart = this.$echarts.init(this.$refs.platformPieChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.platformPieChart.setOption(this.platformPieOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.launchPieChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.launchPieChart = this.$echarts.init(this.$refs.launchPieChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.launchPieChart.setOption(this.launchPieOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.keywordPieChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.keywordPieChart = this.$echarts.init(this.$refs.keywordPieChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.keywordPieChart.setOption(this.keywordPieOption);
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.search.shopId = this.shopId;
            }
            if (this.launchId) {
                this.search.launchId = this.launchId;
            }
            this.search.startDate = this.dateRange[0];
            this.search.endDate = this.dateRange[1];
            this.search.dimension = this.dimension;
            getDpCpcReportBarData(this.search).then(data => {
                if (data.respCode == 1000) {
                    let basic = data.body.BASIC;
                    let ratio = data.body.RATIO;
                    // 使用刚指定的配置项和数据显示图表
                    this.basicOption = this.CHART.getBarOptionExt(basic.title, basic.legendData, basic.xdata, basic.dataOptions, basic.yaxisOptions)
                    this.ratioOption = this.CHART.getBarOptionExt(ratio.title, ratio.legendData, ratio.xdata, ratio.dataOptions, ratio.yaxisOptions)
                    // 初始化图表
                    this.initChart();
                }
            });
            getDpCpcReportSummaryData(this.search).then(data => {
                if (data.respCode == 1000) {
                    if (data.body.all) {
                        this.allSummaryData = data.body.all;
                    } else {
                        this.allSummaryData = {};
                    }
                    if (data.body.dp) {
                        this.dpSummaryData = data.body.dp;
                    } else {
                        this.dpSummaryData = {};
                    }
                    if (data.body.mt) {
                        this.mtSummaryData = data.body.mt;
                    } else {
                        this.mtSummaryData = {};
                    }
                }
            });
            getDpCpcReportCostPieData(this.search).then(data => {
                let body = data.body;
                let platform = body.PLATFORM;
                let launch = body.LAUNCH;
                let keyword = body.KEYWORD;
                this.platformPieOption = this.CHART.getPieOption(platform.title, platform.legendData, platform.seriesData);
                this.launchPieOption = this.CHART.getPieOption(launch.title, launch.legendData, launch.seriesData);
                this.keywordPieOption = this.CHART.getPieOption(keyword.title, keyword.legendData, keyword.seriesData);
                this.initPieChart();
            })
        },
        // 获取字段
        getFields() {
            getDpCpcPlanFields({}).then(data => {
                this.fields = data.body;
            })
        },
        // 获取推广计划
        getPlans() {
            let params = {};
            params.shopId = this.shopId;
            getDpCpcPlanByShopId(params).then(data => {
                this.plans = data.body;
                if (this.plans.length >= 0) {
                    this.plans.unshift({"launchId": 0, "launchName": "全部推广"})
                }
            });
        },
    },
    created() {
    },
    mounted() {
        // 设置默认日期
        let endDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
        let startDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 8));
        this.dateRange = [startDate, endDate]
        this.getPlans();
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
